<template>
    <div class="mainBox">
      <el-container :style="{ 'min-height': documentClientHeight + 'px' }">
        <el-header>
          <main-header></main-header>
        </el-header>
        <el-container>
          <el-aside>
            <mainAside></mainAside>
          </el-aside>
          <el-main :style="{ 'height': documentClientHeight - 60 + 'px' }" style="overflow:auto;">
            <div class="containerWrapper">
              <div class="navbar clearfix">
                <el-breadcrumb class="breadcrumb-container" separator-class="el-icon-arrow-right">
                  <el-breadcrumb-item v-for="item in levelList" :key="item.path" @click.native.prevent="$event.preventDefault()">{{item.meta.title}}</el-breadcrumb-item>
                </el-breadcrumb>
              </div>
              <router-view/>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<script>
import mainHeader from '@/view/mainHeader'
import mainAside from '@/view/mainAside'

export default {
  name: 'mainBox',
  data () {
    return {
      levelList: []
    }
  },
  components: {
    mainHeader,
    mainAside
  },
  watch: {
    $route () {
      this.getBreadcrumb()
    }
  },
  created () {
    this.getBreadcrumb()
  },
  computed: {
    documentClientHeight: {
      get () {
        return this.$store.state.documentClientHeight
      },
      set (val) {
        this.$store.commit('updateDocumentClientHeight', val)
      }
    }
  },
  mounted () {
    this.$nextTick(function () {
      this.resetDocumentClientHeight()
      this.$store.commit('sideNavFn', this.$router.options.routes[1].children[0].children)
    })
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL)
      window.addEventListener('popstate', this.goBack, false)
    }
  },
  methods: {
    goBack () {
      this.$store.commit('isShowFn', true)
      this.$store.commit('isDetailFn', false)
      this.$store.commit('addVisibelFn', false)
    },
    // 重置窗口可视高度
    resetDocumentClientHeight () {
      this.documentClientHeight = document.documentElement['clientHeight']
      window.onresize = () => {
        this.documentClientHeight = document.documentElement['clientHeight']
      }
    },
    getBreadcrumb () {
      let matched = this.$route.matched.filter(item => item.name)
      const first = matched[0]
      var matcheds = []
      if (first && first.name.trim().toLocaleLowerCase() !== 'Dashboard'.toLocaleLowerCase()) {
        matched = matcheds.concat(matched)
      }
      matched.splice(0, 1)
      this.levelList = matched
    }
  }
}
</script>

<style scoped lang="less">
  .mainBox > .el-container {
    .el-header{
      height: 80px !important;
      padding: 0 !important;
      line-height: 80px;
    }

    .el-aside {
      width:300px;
      background: #272c31;
      text-align: center;
    }

    .el-main {
      background: #f5f5f5;
      padding:0 0 50px 0;

      .containerWrapper{
        min-width: 1250px;
        .bearCrumb{
          padding:0 0 0 55px;
          background: #fff;
          line-height: 40px;
          margin:10px 0;

          a:hover{
            text-decoration: underline;
          }
        }
      }
    }
  }
  .navbar  .breadcrumb-container{
    padding-left:55px;
    margin:10px 0;
    background: #fff;
    .el-breadcrumb__item{
      line-height:45px;
      /deep/ .is-link{
        font-weight:10;
      }
    }
  }

</style>
